


<div class="panel">
    <div class="panel-wrapper">
        <h1 class="title">Documentation</h1>

        <nav>
            <ul class="form">
                <li ><a href="#technologies">Technologies utilisées</a></li>
                <li><a href="#organisation">Organisation du code</a></li>
                <li><a href="#repartition">Répartition du travail</a></li>
                <li><a href="#production">Mise en production du jeu</a></li>
                <li><a href="#fonctionnement">Fonctionnement du jeu</a></li>
                <li><a href="#problemes">Problèmes rencontrés</a></li>
            </ul>
        </nav>


        <h2 id="technologies">Technologies utilisées</h2>
        <p>
            Pour réalisé ce projet, un certains nombre de choix techniques on
            été fait. Les technologies utilisées sont:
        </p>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>PHP</li>
            <li>Javascript/Ajax</li>
            <li>jQuery: Bibliothèque qui facilite la programmation javascript</li>
            <li>jQuery-Ui: Bibliothèque qui faicilite le déloppement en jQuery</li>
            <li>Coda-slider: Plugin jQuery qui permet de créer un slider</li>
        </ul>






        <h2 id="organisation">Organisation du code</h2>
        <p>
            Le code est orgnanisé en deux grandes parties, les fichiers qui
            constituent la partie cliente de l'application (placé dans le repertoire
            client) et les fichiers utilisés coté serveur (disponibles dans le
            repertoire server).
        </p>


        <h3>Partie client</h3>
        <p>
            Il existe 3 répertoires dans la partie client:
        </p>
        <ul>
            <li>img: contient l'ensemble des images du site</li>
            <li>js: contient les scripts javascript</li>
            <li>sound: contient les musiques de l'application</li>
        </ul>

        <p>La page visité par le joueur est index.php qui inclut les
            fichiers game.php, regles.php et credit.php. (Chaque fichier
            représente un onglet de l'application) Le header, le footer et le css sont
            séparés des pages de contenu.</p>

        <h3>Partie serveur</h3>
        <p>La partir serveur est constitué de 3 fichiers:</p>

        <ul>
            <li>constant.php: contient les constantes PHP utilisées dans le
                programme du serveur.</li>
            <li>start_game.php: Initialise les parties coté serveur</li>
            <li>play.php: contient le jeux coté serveur. Ce fichier décrit
                le comportement du serveur.</li>
        </ul>
        
        <p>Le code de la partie serveur est plus conséquent que celui demandé
        dans le sujet. Pour des raison de sécurité et pour empêcher le joueur
        de tricher, les scores se trouvent cotés serveur et non coté client.</p>




        <h2 id="repartition">Répartition du travail</h2>
        <p>
            Ce jeux a été conçu dans le cadre d'un projet
            universitaire durant l'année 2011-2012 par deux
            étudiants:
        </p>

        <ul>
            <li>Julien Marigny</li>
            <li>Steven Ferey</li>
        </ul>

        <p>Développeur du jeu:</p>
        <ul>
            <li>Julien Marigny</li>
            <li>Steven Ferey</li>
        </ul>


        <p>Rédacteur de la documentation:</p>
        <ul>
            <li>Julien Marigny</li>
        </ul>

        <p>Rédacteur des règles:</p>
        <ul>
            <li>Steven Ferey</li>
        </ul>

        <p>Créateurs du style css du jeu:</p>
        <ul>
            <li>Julien Marigny</li>
            <li>Steven Ferey</li>
        </ul>

        <p>Testeurs:</p>
        <ul>
            <li>Julien Marigny</li>
            <li>Steven Ferey</li>
        </ul>


        <h2 id="production">Mise en production du jeu</h2>

        <p>Pour mettre en production le site, il faut commencer par copier et
            décompresser l'archive dans le répertoire public du serveur web.
            Ensuite, il faut se connecter via son navigateur sur
            http://localhost/chifoumi/client/ pour accéder au site.</p>


        <h2 id="fonctionnement">Fonctionnement du jeu</h2>

        <p>Avant de commencer une partie, le joueur donne son pseudo. La
            validation du formulaire entraine la création d'une session coté
            serveur et l'apparition du jeu coté client. Par la suite, le client
            communique avec le serveur via des requêtes Ajax déclenché à chaque
            séléction d'un des éléments du jeu. Le retour du serveur est finalement
            décomposé par le client qui effectut les animations et raffraichit
            le resultat</p>

        <p>Le serveur se charge de transmettre une chaine formaté au client
            de la forme suivante: 
        </p>
        <p>X:pseudo:nbRoundJoueur:nbRoundOrdinateur:
            scorePlayer:scoreOrdinateur:choixJoueur:choixOrdinateur:resultat</p>

        <p>
            En découpant la chaine, on obtient un tableau dans lequel sont présent dans
            l'ordre:
        </p>
        <ul>
            <li>Un premier chiffre indiquant le type de message transmit
                (-1 = erreur, 0 = tour, 1 = joueur gagne, 2 = ordinateur gagne)</li>
            <li>Le nombre de round gagné par le joueur</li>
            <li>Le nombre de round gagné par l'ordinateur</li>
            <li>Score du joueur de la manche courante</li>
            <li>Score de l'ordinateur de la manche courante</li>
            <li>Choix du joueur pour le dernier coup (une chaîne de caractère)</li>
            <li>Choix de l'ordinateur pour le dernier coup (une chaîne de caractère)</li>
            <li>Réultat du dernier coup (-1 = Le joueur a perdu, 0 = Nul, 1 = le joueur a gagné)</li>
        </ul>


        <h2 id="problemes">Problèmes rencontrés</h2>

        <p>Lors du développement du jeu, un certain nombre de problèmes
        ont été rencontrés. Même si la pluspart ont été rapidement corrigé,
        nous n'avons pas pu tous les résoudre. Les principaux problèmes non
        résolu sont:</p>

        <ul>
            <li>L'impossibilité d'arréter les animations en cas de séléction
            d'éléments très rapide sans perdre le positionnement initial des
            éléments du jeu</li>
            <li>La validation HTML5 à été faite via l'outil expérimentale du
            w3c, les icônes présente sur le site ne sont pas des icônes de
            validation officiel</li>
            <li>Le tableau des historiques des résultats s'affiche mal sous
            internet explorer.</li>
            <li>Le plugin Coda-slider calcul la taille des panneaux non
            dynamiquement, la hauteur d'un panneau se trouve égale à la
            hauteur du plus grand panneau. Le footer des panneau jeu, règles et
            crédits se trouve donc au niveau du footer de la documentation.</li>
            <li>La balise audio semble ne plus autoriser plusieurs sources.
            La syntaxe de cette balise semble avoir changée ce qui invalide la
            page</li>
            <li>Fautes d'orthographes dans la dokumentation...</li>
        </ul>

    </div>

</div>